یاد بگیرید چگونه با استفاده از CSS رنگ و ظاهر هایلایت انتخاب متن را سفارشی کنید و تجربه کاربری و ثبات برند را در مرورگرها و پلتفرم‌های مختلف بهبود بخشید.
هایلایت سفارشی CSS: تسلط بر استایل‌دهی انتخاب متن
انتخاب متن، عمل ساده کشیدن نشانگر ماوس روی کلمات در یک صفحه وب، اغلب در زمینه طراحی و برندینگ نادیده گرفته می‌شود. با این حال، سفارشی‌سازی رنگ هایلایت پیش‌فرض مرورگر می‌تواند به طور قابل توجهی تجربه کاربری را بهبود بخشد و هویت برند شما را تقویت کند. این راهنمای جامع شما را با تمام آنچه باید در مورد هایلایت سفارشی CSS بدانید، از جمله شبه-عنصر ::selection، سازگاری مرورگرها، ملاحظات دسترس‌پذیری و مثال‌های عملی برای ارتقای طراحی وب‌سایتتان، آشنا می‌کند.
چرا هایلایت‌های انتخاب متن را سفارشی کنیم؟
در حالی که رنگ هایلایت پیش‌فرض مرورگر (معمولاً آبی) کاربردی است، ممکن است با طرح رنگی یا زیبایی‌شناسی برند وب‌سایت شما همخوانی نداشته باشد. سفارشی‌سازی رنگ هایلایت مزایای متعددی دارد:
- ثبات برند: اطمینان حاصل کنید که هایلایت انتخاب با رنگ‌های برند شما هماهنگ است و یک تجربه بصری یکپارچه ایجاد می‌کند.
- تجربه کاربری بهبود یافته: یک رنگ هایلایت مناسب می‌تواند خوانایی را بهبود بخشد و خستگی چشم را کاهش دهد، به ویژه برای کاربرانی که دارای اختلالات بینایی هستند.
- جذابیت بصری افزایش یافته: یک هایلایت سفارشی می‌تواند لمس ظریفی از پیچیدگی و حرفه‌ای بودن به طراحی وب‌سایت شما اضافه کند.
- افزایش تعامل: اگرچه جزئیات بصری جزئی به نظر می‌رسند، اما به تعامل و رضایت کلی کاربر کمک می‌کنند.
شبه-عنصر ::selection
شبه-عنصر ::selection کلید سفارشی‌سازی هایلایت‌های انتخاب متن با CSS است. این عنصر به شما امکان می‌دهد رنگ پس‌زمینه و رنگ متن انتخاب شده را استایل‌دهی کنید. توجه داشته باشید که با استفاده از این شبه-عنصر نمی‌توانید ویژگی‌های دیگری مانند font-size، font-weight یا text-decoration را استایل‌دهی کنید.
سینتکس پایه
سینتکس پایه ساده است:
::selection {
background-color: رنگ;
color: رنگ;
}
رنگ را با مقادیر رنگ دلخواه خود (مثلاً هگزادسیمال، RGB، HSL یا رنگ‌های نام‌گذاری شده) جایگزین کنید.
مثال
در اینجا یک مثال ساده آورده شده است که رنگ پس‌زمینه را به آبی روشن و رنگ متن را هنگام انتخاب متن به سفید تغییر می‌دهد:
::selection {
background-color: #ADD8E6; /* آبی روشن */
color: white;
}
این قانون CSS را به فایل استایل‌شیت خود یا تگ <style> اضافه کنید تا هایلایت سفارشی اعمال شود.
سازگاری با مرورگرها: رسیدگی به پیشوندها
در حالی که ::selection توسط مرورگرهای مدرن به طور گسترده پشتیبانی می‌شود، نسخه‌های قدیمی‌تر ممکن است به پیشوندهای فروشنده (vendor prefixes) نیاز داشته باشند. برای اطمینان از حداکثر سازگاری، بهترین روش این است که پیشوندهای -moz-selection و -webkit-selection را نیز اضافه کنید.
سینتکس به‌روز شده با پیشوندها
در اینجا سینتکس به‌روز شده برای شامل کردن پیشوندهای فروشنده آورده شده است:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
این کار تضمین می‌کند که هایلایت سفارشی شما در طیف وسیع‌تری از مرورگرها، از جمله نسخه‌های قدیمی‌تر فایرفاکس (-moz-selection) و سافاری/کروم (-webkit-selection)، کار می‌کند.
ملاحظات دسترس‌پذیری
هنگام سفارشی‌سازی هایلایت‌های انتخاب متن، اولویت دادن به دسترس‌پذیری بسیار مهم است. انتخاب‌های رنگی نامناسب می‌تواند خواندن متن انتخاب شده را برای کاربرانی که دارای اختلالات بینایی هستند دشوار کند. در اینجا برخی از ملاحظات کلیدی آورده شده است:
- نسبت کنتراست: از کنتراست کافی بین رنگ پس‌زمینه و رنگ متن هایلایت انتخاب اطمینان حاصل کنید. WCAG (دستورالعمل‌های دسترس‌پذیری محتوای وب) نسبت کنتراست حداقل 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ را توصیه می‌کند.
- کوررنگی: هنگام انتخاب رنگ‌های هایلایت، به کوررنگی توجه داشته باشید. از ترکیب رنگ‌هایی که تشخیص آنها برای افراد با انواع مختلف نقص دید رنگی دشوار است، خودداری کنید. ابزارهایی مانند Color Contrast Checker وب‌سایت WebAIM (https://webaim.org/resources/contrastchecker/) می‌توانند به شما در ارزیابی ترکیب‌های رنگی کمک کنند.
- ترجیحات کاربر: در نظر بگیرید که به کاربران اجازه دهید رنگ هایلایت را متناسب با نیازها و ترجیحات فردی خود سفارشی کنند. این کار را می‌توان از طریق تنظیمات کاربری یا افزونه‌های مرورگر انجام داد.
مثال: ترکیب رنگی دسترس‌پذیر
در اینجا مثالی از یک ترکیب رنگی دسترس‌پذیر با نسبت کنتراست بالا آورده شده است:
::selection {
background-color: #2E8B57; /* سبز دریایی */
color: #FFFFFF; /* سفید */
}
این ترکیب کنتراست قوی ایجاد می‌کند و خواندن متن انتخاب شده را برای کاربران آسان‌تر می‌سازد.
تکنیک‌های سفارشی‌سازی پیشرفته
فراتر از تغییرات رنگی پایه، می‌توانید از متغیرهای CSS و تکنیک‌های دیگر برای ایجاد هایلایت‌های انتخاب متن پیچیده‌تر و پویاتر استفاده کنید.
استفاده از متغیرهای CSS
متغیرهای CSS (که به عنوان خصوصیات سفارشی نیز شناخته می‌شوند) به شما امکان می‌دهند مقادیر قابل استفاده مجددی را تعریف کنید که به راحتی قابل به‌روزرسانی هستند. این ویژگی به ویژه برای حفظ ثبات در سراسر طراحی وب‌سایت شما مفید است.
تعریف متغیرهای CSS
متغیرهای CSS خود را در شبه-کلاس :root تعریف کنید:
:root {
--highlight-background: #FFD700; /* طلایی */
--highlight-text: #000000; /* مشکی */
}
استفاده از متغیرهای CSS در ::selection
از تابع var() برای ارجاع به متغیرهای CSS در قانون ::selection خود استفاده کنید:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
اکنون، می‌توانید به راحتی با به‌روزرسانی متغیرهای CSS در شبه-کلاس :root رنگ هایلایت را تغییر دهید.
رنگ‌های هایلایت پویا بر اساس زمینه
شما می‌توانید رنگ‌های هایلایت پویا بر اساس زمینه متن انتخاب شده ایجاد کنید. به عنوان مثال، ممکن است بخواهید برای عناوین از رنگ هایلایت متفاوتی نسبت به متن اصلی استفاده کنید. این کار را می‌توان با استفاده از جاوا اسکریپت و متغیرهای CSS انجام داد.
مثال: هایلایت‌های متمایز
ابتدا، متغیرهای CSS را برای رنگ‌های هایلایت مختلف تعریف کنید:
:root {
--heading-highlight-background: #87CEEB; /* آبی آسمانی */
--heading-highlight-text: #FFFFFF; /* سفید */
--body-highlight-background: #FFFFE0; /* زرد روشن */
--body-highlight-text: #000000; /* مشکی */
}
سپس، از جاوا اسکریپت برای اضافه کردن یک کلاس به عنصر والد متن انتخاب شده استفاده کنید:
// این یک مثال ساده شده است و برای مدیریت دقیق سناریوهای مختلف انتخاب،
// به پیاده‌سازی قوی‌تری نیاز دارد.
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
در نهایت، قوانین CSS را برای کلاس‌های مختلف تعریف کنید:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
این مثال نشان می‌دهد که چگونه می‌توانید بر اساس زمینه انتخاب شده، رنگ‌های هایلایت متفاوتی برای عناوین و متن اصلی ایجاد کنید. یک پیاده‌سازی جامع‌تر نیازمند مدیریت سناریوهای مختلف انتخاب و موارد خاص با جاوا اسکریپت خواهد بود.
مثال‌های عملی و موارد استفاده
در اینجا چند مثال عملی و موارد استفاده برای الهام بخشیدن به طرح‌های هایلایت سفارشی شما آورده شده است:
- طراحی مینیمالیستی: از یک رنگ ملایم و غیر اشباع برای هایلایت استفاده کنید تا ظاهری تمیز و مدرن حفظ شود. به عنوان مثال، خاکستری روشن یا بژ.
- تم تیره: رنگ‌های پیش‌فرض را برای یک تم تیره معکوس کنید، از یک پس‌زمینه تیره و متن روشن برای هایلایت استفاده کنید. این کار خوانایی را در محیط‌های کم نور بهبود می‌بخشد.
- تقویت برندینگ: از رنگ اصلی یا ثانویه برند خود برای هایلایت استفاده کنید تا شناخت برند را تقویت کنید.
- آموزش‌های تعاملی: از یک رنگ روشن و جلب‌توجه‌کننده برای هایلایت در آموزش‌های تعاملی استفاده کنید تا کاربران را در مراحل راهنمایی کنید. به عنوان مثال، زرد یا نارنجی پررنگ.
- هایلایت کردن کد: رنگ هایلایت را برای قطعه کدهای خود سفارشی کنید تا خوانایی را بهبود بخشیده و عناصر مختلف کد را از هم متمایز کنید.
مثال: هایلایت کد با هایلایت سفارشی
برای هایلایت کد، یک رنگ ملایم اما متمایز می‌تواند خوانایی را بهبود بخشد:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* زرد روشن با شفافیت */
color: #000000; /* مشکی */
}
این مثال از یک رنگ زرد روشن نیمه‌شفاف برای هایلایت کد انتخاب شده استفاده می‌کند که تشخیص آن را بدون ایجاد حواس‌پرتی بیش از حد، آسان می‌سازد.
اشتباهات رایج که باید از آنها اجتناب کرد
در اینجا برخی از اشتباهات رایج که باید هنگام سفارشی‌سازی هایلایت‌های انتخاب متن از آنها اجتناب کرد، آورده شده است:
- نادیده گرفتن دسترس‌پذیری: عدم اطمینان از کنتراست کافی بین رنگ‌های پس‌زمینه و متن.
- رنگ‌های بیش از حد روشن یا حواس‌پرت‌کن: استفاده از رنگ‌هایی که بیش از حد روشن یا حواس‌پرت‌کن هستند و می‌توانند باعث خستگی چشم و کاهش خوانایی شوند.
- استایل‌دهی ناهماهنگ: اعمال سبک‌های هایلایت مختلف در بخش‌های مختلف وب‌سایت شما که باعث ایجاد یک تجربه کاربری نامنسجم می‌شود.
- فراموش کردن پیشوندهای فروشنده: نادیده گرفتن پیشوندهای فروشنده برای مرورگرهای قدیمی‌تر.
- استفاده بیش از حد از هایلایت‌های سفارشی: فقط در جایی از هایلایت‌های سفارشی استفاده کنید که تجربه کاربری را بهبود می‌بخشد. استفاده بیش از حد از آنها می‌تواند باعث شود سایت شلوغ یا حواس‌پرت‌کن به نظر برسد.
نتیجه‌گیری
سفارشی‌سازی هایلایت‌های انتخاب متن با CSS یک روش ساده اما مؤثر برای بهبود تجربه کاربری و تقویت هویت برند شماست. با درک شبه-عنصر ::selection، رسیدگی به سازگاری مرورگرها و اولویت دادن به دسترس‌پذیری، می‌توانید وب‌سایت‌هایی با جذابیت بصری و کاربرپسند ایجاد کنید. با ترکیب‌ها و تکنیک‌های رنگی مختلف آزمایش کنید تا سبک هایلایت عالی برای برند خود را پیدا کنید.
به یاد داشته باشید که همیشه هایلایت‌های سفارشی خود را در مرورگرها و دستگاه‌های مختلف آزمایش کنید تا از نتایج یکسان اطمینان حاصل کنید. با توجه به این جزئیات که اغلب نادیده گرفته می‌شود، می‌توانید طراحی وب‌سایت خود را ارتقا دهید و تجربه جذاب‌تری برای کاربران خود ایجاد کنید.